<!--
* @Author: white_queen
* @Date: 2024-07-19 14:32:00
* @LastEditors: white_queen
* @LastEditTime: 2024-07-21 13:47:54
* @FilePath: /pages/scoreShop/index/index.vue
* @Description: 积分商城
-->
<template>
	<view class="page">
		<u-navbar title="能量商城" bgColor="rgba(255,255,255,0)" :auto-back="true"></u-navbar>
		<view class="page-top">
			<image class="bg" src="../../../static/images/4616008996.png" mode="widthFix"></image>
			<view class="tip">
				<text class="top">我的能量值</text>
				<text class="main">3892</text>
			</view>
			<view class="top-list">
				<view class="item">
					<image class="icon" src="../../../static/icon/编组 16.png" mode="aspectFill"></image>
					<text class="lable">我的兑换</text>
				</view>
				<view class="item">
					<image class="icon" src="../../../static/icon/编组 9.png" mode="aspectFill"></image>
					<text class="lable">收货地址</text>
				</view>
				<view class="item">
					<image class="icon" src="../../../static/icon/编组 12.png" mode="aspectFill"></image>
					<text class="lable">积分明细</text>
				</view>
			</view>
		</view>
		<view class="title" style="margin-top: 660rpx">好礼兑换</view>
		<view class="list">
			<u-list @scrolltolower="scrolltolower" :preLoadScreen="3" :height="listHeight">
				<u-list-item v-for="item in list" :key="item.id">
					<view class="list-item">
						<image class="item-left" :src="item.image" mode="aspectFill"></image>
						<view class="item-right">
							<view class="item-name">{{ item.name }}</view>
							<view class="item-right-bottom">
								<view class="score">
									<text class="score-value">{{ item.info.price }}</text>
									<text class="lable">积分</text>
								</view>
								<view class="pay-btn" @click="clickItem(item)">兑换</view>
							</view>
						</view>
					</view>
				</u-list-item>
			</u-list>
		</view>
	</view>
</template>

<script>
import httpApi from '../../../http';
import { calculateTotalPages } from '@/utils/index.js';
export default {
	data() {
		return {
			sys: uni.$u.sys(),
			list: [],
			page: 1,
			total: null
		};
	},
	computed: {
		listHeight() {
			return this.sys.windowHeight - 430;
		}
	},
	onLoad() {
		this.init();
	},
	methods: {
		init() {
			httpApi.ScoreShopApi.getInitList({ page: this.page, limit: 10 }).then((res) => {
				this.list = this.list.concat(res.data.list);
				this.total = res.data.total;
			});
		},
		// 触底
		scrolltolower() {
			this.page += 1;
			if (calculateTotalPages(this.total, 10) <= this.page) {
				uni.showToast({
					title: '没有更多了..',
					icon: 'none'
				});
			} else {
				this.init();
			}
		},
		// 点击兑换
		clickItem(item) {
			uni.navigateTo({
				url: `/pages/scoreShop/detail/detail?id=${item.id}`
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.page-top {
	width: 750rpx;
	.bg {
		width: 750rpx;
		position: absolute;
		top: 0;
	}
	.tip {
		position: absolute;
		top: 186rpx;
		left: 48rpx;
		display: flex;
		flex-direction: column;
		.top {
			font-family: SourceHanSerifCN, SourceHanSerifCN;
			font-weight: 400;
			font-size: 28rpx;
			color: #999;
			line-height: 40rpx;
			margin-left: 2rpx;
		}
		.main {
			margin-top: 10rpx;
			font-family: SourceHanSerifCN, SourceHanSerifCN;
			font-weight: bold;
			font-size: 76rpx;
			color: #2e2e2e;
			line-height: 76rpx;
		}
	}
	.top-list {
		width: 690rpx;
		height: 266rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
		background: linear-gradient(180deg, #fff2e3 0%, #ffffff 100%);
		border-radius: 20rpx;
		border: 2rpx solid #ffffff;
		position: absolute;
		top: 364rpx;
		left: 50%;
		transform: translate(-50%);
		display: flex;
		justify-content: space-between;
		align-items: center;
		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			.icon {
				width: 84rpx;
				height: 84rpx;
			}
			.lable {
				margin-top: 28rpx;
				font-family: SourceHanSerifCN, SourceHanSerifCN;
				font-weight: 500;
				font-size: 28rpx;
				color: #2e2e2e;
				line-height: 28rpx;
			}
		}
	}
}
.title {
	font-family: SourceHanSerifCN, SourceHanSerifCN;
	font-weight: bold;
	font-size: 36rpx;
	color: #292929;
	line-height: 52rpx;
	margin-left: 40rpx;
	padding-top: 40rpx;
}
.list {
	margin-top: 34rpx;
	width: 750rpx;
	height: calc(100vh - 790rpx);
	// height: 100vh;
	overflow: auto;

	.list-item {
		width: 690rpx;
		background-color: #fff;
		padding: 30rpx 40rpx 30rpx 30rpx;
		box-sizing: border-box;
		margin: 0 auto 24rpx;
		box-shadow: 0rpx 0rpx 36rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.item-left {
			width: 176rpx;
			height: 176rpx;
			border-radius: 20rpx;
		}
		.item-right {
			height: 176rpx;
			margin-left: 40rpx;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.item-name {
				font-family: SourceHanSerifCN, SourceHanSerifCN;
				font-weight: 600;
				font-size: 28rpx;
				color: #292929;
				line-height: 40rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.item-right-bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.score {
					.score-value {
						font-family: SourceHanSerifCN, SourceHanSerifCN;
						font-weight: 500;
						font-size: 28rpx;
						color: #ff2928;
						line-height: 40rpx;
					}
					.lable {
						color: #292929;
					}
				}
				.pay-btn {
					width: 160rpx;
					height: 56rpx;
					background: #cfae7d;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 10rpx;
					font-family: SourceHanSerifCN, SourceHanSerifCN;
					font-weight: 500;
					font-size: 28rpx;
					color: #ffffff;
					line-height: 28rpx;
				}
			}
		}
	}
}
</style>
